<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="icon" type="image/x-icon" href="https://s01.mifile.cn/favicon.ico">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/macarons2.js"></script>
    <!-- <script src="../js/auto.js"></script> -->

    <style>
        html,
        body {
            height: 100%;
        }
    </style>
</head>

<body style="display: flex;">
    <div class="d-flex flex-column flex-shrink-0 p-3 text-white"
        style="width: 280px;height: 100%; background-color: rgb(65, 71, 68);">
        <a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                class="bi bi-house-door-fill" viewBox="0 0 16 16">
                <path
                    d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
            </svg>
            <span class="fs-5">图书管理系统</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="home.html" class="nav-link active" aria-current="page"
                    style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-globe-central-south-asia" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM4.882 1.731a.482.482 0 0 0 .14.291.487.487 0 0 1-.126.78l-.291.146a.721.721 0 0 0-.188.135l-.48.48a1 1 0 0 1-1.023.242l-.02-.007a.996.996 0 0 0-.462-.04 7.03 7.03 0 0 1 2.45-2.027Zm-3 9.674a7.003 7.003 0 0 0 12.659-.906.61.61 0 0 1-.041.001c-.735 0-1.808-1.407-2.365-2.282A.466.466 0 0 0 11.743 8a.454.454 0 0 0-.378.202l-.79 1.187a1 1 0 0 0-.117.238l-.73 2.19a1 1 0 0 1-.949.683h-.058a1 1 0 0 1-.949-.684l-.73-2.189a1 1 0 0 0-.116-.238L6.13 8.197A.78.78 0 0 1 6 7.764v-.455a.5.5 0 0 0-.724-.447.5.5 0 0 1-.523-.047l-1.09-.818a.414.414 0 0 0-.542.624l1.016 1.016a1 1 0 0 1-.152 1.54l-.04.026a1 1 0 0 0-.445.832v.184a1 1 0 0 1-.757.97l-.86.216Z" />
                    </svg>&nbsp;
                    首页
                </a>
            </li>
            
            <li>
              <a href="ReaderMana.html" class="nav-link text-white" style="display: flex;align-items: center;">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-person-fill" viewBox="0 0 16 16">
                      <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                  </svg>&nbsp;
                  管理员管理
              </a>
          </li>
          <li>
            <a href="BookDetails.html" class="nav-link text-white" style="display: flex;align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-person-fill" viewBox="0 0 16 16">
                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                </svg>&nbsp;
                读者注册信息表
            </a>
        </li>
        <li>
          <a href="BookBorrow.html" class="nav-link text-white" style="display: flex;align-items: center;">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-person-fill" viewBox="0 0 16 16">
                  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
              </svg>&nbsp;
              读者借书登记
          </a>
      </li>
        <li>
          <a href="book_Info.html" class="nav-link text-white" style="display: flex;align-items: center;">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-person-fill" viewBox="0 0 16 16">
                  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
              </svg>&nbsp;
              图书信息管理
          </a>
      </li>
          <li>
            <a href="BookClass.html" class="nav-link text-white" style="display: flex;align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-person-fill" viewBox="0 0 16 16">
                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                </svg>&nbsp;
                图书分类
            </a>
        </li>
          <li>
            <a href="bookLend.html" class="nav-link text-white" style="display: flex;align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-person-fill" viewBox="0 0 16 16">
                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                </svg>&nbsp;
                图书借阅信息管理
            </a>
        </li>
        
        </ul>
    </div>
    <div class="b-example-divider" style="height: 100%;width:calc(100% - 280px)">
        <div class="header"
            style="padding:0 50px;height: 70px;background-color: #414744;display: flex;justify-content: space-between;align-items: center;">
            <div class="left" style="font-size: 30px;color: #fff;"></div>
            <div class="right" style="width: 50px;height: 50px;border-radius: 50%; position: relative;">
                <span id="nickname" style="position: absolute;top: 0;left: -100px; font-size: 30px;color: #fff;"></span>
                <img style="width: 100%;height: 100%; display: block;" id="avatar" src="../img/avatar.jpg" alt="">
                <button style="display: none;" id="logout">退出</button>
            </div>
        </div> 
                  <p style="font-size: 32px;text-align: center;width: 100%-280px;">图书管理系统图书月销量表</p> 
        <div id="main" style="width: 1000px;height:500px;margin-left: 60px;margin-top: 30px;"></div>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    
    </div>
    <!-- 引入头部的时间 -->
    <script src="../js/public.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        let dataX = [
        "历史",
        "地理",
        "文学",
        "政治",
        "军事",
        "小说",
        "散文",
        "哲学",
        "音乐",
        "武术",
        "经济",
        "工程",
        "金融",
         
       ]; //名称
       let dataY = [
         20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 
       ]; //数据
       let zoomShow = false;
       if (dataY.length > 14) {
         zoomShow = true;
       } else {
         zoomShow = false;
       }
       var option = {
         backgroundColor: "#0D2753",
         tooltip: {
           trigger: "axis",
           axisPointer: {
             type: "shadow",
           },
         },
         grid: {
           top: "10%",
           right: "5%",
           left: "5%",
           bottom: "10%",
         },
         xAxis: [
           {
             type: "category",
             data: dataX,
             axisLine: {
               lineStyle: {
                 color: "rgba(66, 192, 255, .3)",
               },
             },
             axisLabel: {
               interval: 0,
               margin: 10,
               color: "#05D5FF",
               textStyle: {
                 fontSize: 11,
               },
               rotate: "45",
             },
             axisTick: {
               //刻度
               show: false,
             },
           },
         ],
         yAxis: [
           {
             axisLabel: {
               padding: [3, 0, 0, 0],
               formatter: "{value}",
               color: "rgba(95, 187, 235, 1)",
               textStyle: {
                 fontSize: 11,
               },
             },
             axisTick: {
               show: true,
             },
             axisLine: {
               lineStyle: {
                 color: "rgba(66, 192, 255, .3)",
               },
             },
             splitLine: {
               lineStyle: {
                 color: "rgba(255,255,255,0)",
               },
             },
           },
         ],
         dataZoom: [
           //滚动条
           {
             show: zoomShow,
             type: "slider",
             realtime: true,
             startValue: 0,
             endValue: 14,
             xAxisIndex: [0],
             bottom: "10",
             left: "30",
             height: 10,
             borderColor: "rgba(0,0,0,0)",
             textStyle: {
               color: "#05D5FF",
             },
           },
         ],
         series: [
           {
             type: "bar",
             data: dataY,
             barWidth: "10",
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
                   0,
                   0,
                   1,
                   [
                     {
                       offset: 0,
                       color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                     },
                     {
                       offset: 0.98,
                       color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                     },
                   ],
                   false
                 ),
                 shadowColor: "rgba(5, 213, 255, 1)",
                 shadowBlur: 4,
               },
             },
             label: {
               normal: {
                 show: true,
                 lineHeight: 10,
                 formatter: "{c}",
                 position: "top",
                 textStyle: {
                   color: "#fff",
                   fontSize: 10,
                 },
               },
             },
           },
         ],
       };
       myChart.setOption(option);
       
           </script>

   
</body>

</html>